<template>
	<view>
		<view class="pay-con base-con " style="margin-top: 20upx;">
			<view class="pay-top flex p-20 m-b-34" v-if="orderDetail.status==10 && orderDetail.order_amount>orderDetail.advance_amount">
				<u-icon name="info-circle" color="#EE3B09" size="40" ></u-icon>
				<text class="p-l-20">请确认订单费用如有其他费用请及时支付</text>
			</view>
			<view class="flex row-between bold">
				<view class="">{{orderDetail.pay_status_desc}}</view>
				<view class="">{{orderDetail.total_amount}}元</view>
			</view>
			<view class="m-t-16 flex" style="color: rgba(153, 148, 148, 100);" v-if="payMore"  @click="payMore=false">
				付款方式
				<view class="flex row-center"  style="width: 40upx;height: 40upx;text-align: center;">
					<u-icon name="arrow-down" size="28" ></u-icon>
				</view>
			</view>
			<view class="order-info" v-else>
				<view class="item flex row-between" style="padding: 12upx 0;">
					<view class="title">支付方式</view>
					<view class="black">{{orderDetail.pay_way_desc}}</view>
				</view>
			</view>
			
			<view class="m-t-28 text-right">
				<view class="theme-color" @click="costDetail">费用明细</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"order-pay",
		data() {
			return {
				payMore:true,
			};
		},
		methods:{
			costDetail(){
				let id = this.orderDetail.id;
				uni.navigateTo({
					url:'/bundle/pages/cost_detail/cost_detail?id=' + id
				})
			},
		},
		props:['orderDetail']
	}
</script>

<style>
	.pay-con{
		padding: 32upx 22upx 24upx 22upx;
		background-color: #fff;
		border-radius: 12upx;
	}
	.pay-top{
		width: 100%;
		height: 76upx;
		line-height: 76upx;
		color: #EE3B09;
		background-color: #FDEEEA;
		border-radius: 12upx;
	}
</style>
